<script setup>
import { onMounted, ref } from "vue";
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import http from "@/utils/http";
import { userStore } from "@/stores/userStore.js";
import VueQrcode from 'vue-qrcode'

const uStore = userStore()
const payData = ref([])
const total = ref(0); // 添加总条数变量
const dialogVisible = ref(false)
const qrCodeValue = ref('')
const qrCodeSize = ref(200)

// const handlePay = (row) => {
//     // 构造一个支付链接，可以是你自己的后端接口或者模拟地址
//     const paymentUrl = `https://yourdomain.com/api/pay?orderId=${row.orderId}`
//     qrCodeValue.value = paymentUrl
//     dialogVisible.value = true
// }

const info = ref({
    orderId: '',
    state: ''
})
const handlePay = async (row, state) => {
    info.value.orderId = row.orderId
    info.value.state = state
    const paymentUrl = `http://192.168.1.102:8080/orders/payMoney?orderId=${row.orderId}`;
    qrCodeValue.value = paymentUrl;
    dialogVisible.value = true;

    // 假设用户扫码支付完成，5秒后刷新订单数据
    setTimeout(() => {
        getOrderData();
    }, 3000);
}


const params = ref({
    page: 1,
    pageSize: 10,
    userId: uStore.userInfo.data.userId
})
const getOrderData = async () => {
    const res = await http.get('/orders/personal', { params: params.value })
    payData.value = res.data.rows
    total.value = res.data.total; // 假设后端返回total字段
}

// 取消订单
const handleCancel = async (row) => {
    try {
        // 发送取消订单请求
        const res = await http.delete(`/orders/deletePay/${row.orderId}`);
        if (res.code === 666) {
            ElMessage({ type: 'success', message: '取消成功' })
            await getOrderData();
        } else {
            ElMessage.error(res.msg || '取消订单失败');
        }
    } catch (error) {
        console.error('取消订单出错:', error);
        ElMessage.error('取消订单时发生错误');
    }
};
const handleCurrentChange = (currentPage) => {
    params.value.page = currentPage;
    getOrderData();
};

onMounted(() => {
    getOrderData()
})
</script>

<template>
    <el-table :data="payData" style="width: 100%">
        <el-table-column label="订单号" prop="orderId"></el-table-column>
        <el-table-column label="物品信息" prop="orderGoods"></el-table-column>
        <el-table-column label="价格(RMB)" prop="orderPrice"></el-table-column>
        <el-table-column label="收货地址" prop="addressName"></el-table-column>

        <el-table-column label="状态" prop="state">
            <template v-slot="scope">
                <el-tag type="info" v-if="scope.row.state === 0">{{ '未支付' }}</el-tag>
                <el-tag type="success" v-if="scope.row.state === 1">{{ '已支付' }}</el-tag>
                <el-tag type="danger" v-if="scope.row.state === 2">{{ '订单取消' }}</el-tag>
            </template>
            <!-- deletePay -->
        </el-table-column>

        <el-table-column label="创建时间" prop="createTime"></el-table-column>

        <el-table-column label="Operations">
            <template #default="scope">
                <el-button size="small" @click="handlePay(scope.row, 1)">
                    去支付
                </el-button>

                <el-popconfirm title="你确定取消订单？" @confirm="handleCancel(scope.row)" confirm-button-text="确定"
                    cancel-button-text="再想想">
                    <template #reference>
                        <el-button type="text">取消订单</el-button>
                    </template>
                </el-popconfirm>

            </template>
        </el-table-column>
    </el-table>

    <el-footer>
        <el-pagination background :current-page="params.page" :page-size="params.pageSize" layout="prev, pager, next"
            @current-change="handleCurrentChange" :total="total">
        </el-pagination>
    </el-footer>

    <!-- 弹窗显示二维码 -->
    <el-dialog v-model="dialogVisible" title="扫码支付" width="300px">
        <div style="text-align: center;">
            <vue-qrcode :value="qrCodeValue" :size="qrCodeSize" :background-color="'#ffffff'"
                :foreground-color="'#000000'" :level="'H'" />
            <p style="margin-top: 10px; font-size: 14px;">请扫码完成支付</p>
        </div>
    </el-dialog>
</template>

<style scoped>
/* 表格整体样式 */
.el-table {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* 表头样式 */
.el-table thead {
    background-color: #f5f7fa;
}

/* 单元格内文字垂直居中 */
.el-table td,
.el-table th {
    vertical-align: middle;
    font-size: 14px;
}

/* 按钮统一风格 */
.el-button--small {
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    transition: all 0.2s ease-in-out;
}

/* “去支付”按钮风格 */
.el-button--small:not(.el-button--text) {
    background: linear-gradient(to right, #4caf50, #69bb7b);
    color: white;
    border: none;
}

.el-button--small:not(.el-button--text):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
}

/* “取消订单”按钮风格 */
.el-button--text {
    color: #e53935;
    font-weight: 500;
}

.el-button--text:hover {
    color: #c62828;
}

/* 分页器样式 */
.el-pagination {
    margin-top: 20px;
    text-align: center;
}

.el-pagination .el-pager li.active {
    background-color: #4caf50 !important;
    border-radius: 6px;
    color: white;
}

.el-pagination .el-pager li:hover {
    color: #4caf50;
}

/* 弹出确认框自定义样式 */
.el-popconfirm__reference-wrapper .el-button {
    margin-left: 8px;
}
</style>
